<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的应用</title>
    <link href="/css/layui.css" rel="stylesheet"/>
    <style type="text/css">
        .flex-container{
            display:flex;
            align-content: stretch;
            flex-wrap: wrap;
        }
        .flex-item{
            width:200px;
            text-align:center;
            margin:30px;
        }










    </style>
</head>
<body>
<ul class="layui-nav">
    <li class="layui-nav-item"><a href="/app/list">产品</a></li>
    <li class="layui-nav-item"><a href="#">控制</a></li>
</ul>
<div class="layui-container">

    <div class="flex-container">
        <div th:each="app:${appList}" class="flex-item ">
            <div>
                <a th:href="@{'/app/detail/'+${app.id}}" th:text="${app.appName}" style="display:block;"></a>
                <img th:src="${app.icon}"
                     style="width:140px;height:140px;margin-top:10px;border-radius:5%;"/>
            </div>
        </div>
    </div>
</div>


<script src="/js/layui.js"></script>
</body>
</html>